<script>
  import {SetToken} from '../lib/token.js';
  import {Post} from '../lib/net.js';
  import {AdminLogin} from '../api.js';
  import {LoginType, ChanAccess} from '../service.js';
  import md5 from 'md5';

  let user_type = 0,
    user_name = null,
    user_pwd = null,
    account_type = 0;

  async function login() {
    if(user_pwd.length < 8) {
        alert("登陆密码需大于八位")
        return
    }
    let res = await Post(AdminLogin, {
      account: user_name,
      pwd: md5(user_pwd),
      account_type: Number(user_type),
    });
    if (res) {
		localStorage.setItem("user_type", user_type);
      LoginType.set(res);
      localStorage.setItem("uid", res);
      localStorage.setItem("uidId", res);
      ChanAccess.set(true);
		}

  }
</script>

<div class="view" style="background: url('images/BG大@2x.png') center center / cover no-repeat;">
		<div class="login-form">
				<div class="left" style="background: url('images/BG小@2x.png') center center / cover no-repeat;">
						<img class="logo" src="images/LOGIN-LOGO.png" alt="logo">
						<h1 class="company-name">CFTCEX</h1>
				</div>

				<div class="right">
						<h1 class="system-name">CFTCEX交易所管理系统</h1>

						<div class="form control">
								<div class="user-name field has-addons">
										<p class="control">
                        <span class="select">
                            <img src="images/user.png" class="user-icon" alt="user-icon">
                            <select bind:value={user_type}>
                                <option value=0>管理员</option>
                                <!--<option value=1>二级代理</option>
								<!--<option value=2>三级代理</option>-->
                            </select>
                        </span>
										</p>
										<p class="control user-name-input">
												<input class="input" bind:value={user_name} type="text" placeholder="">
										</p>
								</div>
								<div class="user-pwd">
										<img src="images/pwd.png" class="pwd-icon" alt="password">
										<input class="input" bind:value={user_pwd} type="password" placeholder="密码">
								</div>
								<button class="button login-btn" on:click={login}>登录</button>
						</div>
				</div>
		</div>
</div>

<style lang="scss">

		* {
				user-select: none;
		}

		.view {
				width: 100vw;
				height: 100vh;
				background: url(images/BG大@2x.png) no-repeat center / cover;

				display: flex;
				align-items: center;
				justify-content: center;

				.login-form {
						width: 1200px;
						height: 610px;

						display: flex;

						.left {
								flex: 1;
								height: 100%;
								background: url(images/BG小@2x.png) no-repeat center / cover;

								.logo {
										width: 268px;
										height: 80px;
										margin: 79px 0 0 75px;
								}

								.company-name {
										font-size: 36px;
										color: #fff;
										margin: 21px 0 0 85px;
								}
						}

						.right {
								flex: 1;
								height: 100%;
								background: #fff;

								display: flex;
								align-items: center;
								flex-direction: column;

								.system-name {
										font-size: 40px;
										color: #09C389;
										margin-top: 116px;
								}

								.form {
										width: 417px;

										.select {
												width: 160px;
												position: relative;

												select {
														width: 160px;
														padding-left: 58px;
												}

												.user-icon {
														width: 30px;
														height: 30px;
														position: absolute;
														z-index: 5;
														top: 50%;
														left: 18px;
														margin-top: -15px;
												}
										}

										.user-name, .user-pwd, .login-btn {
												height: 67px;
												margin-top: 30px;
										}

										.user-name > p, .user-name select, .user-name input, .user-name span {
												height: 67px;
										}

										.user-name-input {
												flex: 1;

												.input {
														border-left: none;
												}
										}

										.user-pwd {
												display: flex;
												align-items: center;
												position: relative;

												.input {
														height: 67px;
														width: 100%;
														padding-left: 58px;
												}

												.pwd-icon {
														position: absolute;
														z-index: 1;
														width: 30px;
														height: 30px;
														flex-shrink: 0;
														margin-left: 20px;
												}
										}

										.login-btn {
												width: 417px;
												margin-top: 40px;
												background: #09C389;
												color: #fff;
												font-size: 24px;
										}
								}
						}
				}
		}
		
		
		.select:not(.is-multiple):not(.is-loading)::after { //下拉箭头
		    border: none;
		}

</style>
